<!--    客户管理-客户详情  by jh   -->
<template>
    <div>
        <div class="right">
            <el-row>
                <el-col :span="22">
                    <div class="ca-title"><h3 class="h3">投资详情</h3></div>
                </el-col>
                <el-col :span="2">
                    <el-button @click="exportFile()" class="ca-btn ca-btn-default ca-p-tb-lr-9-15" ><i class="fa fa-share"></i> 导出</el-button>

                    <!--<button type="text" class="exportFileBtn" @click="exportFile">导出</button>-->
                </el-col>
            </el-row>
            <div class="ca-m-t-20">
                <el-table
                    ref="singleTable"
                    class="ca-table"
                    border
                    :data="tableData"
                    show-summary
                    :summary-method="getSummaries"
                    >
                    <el-table-column
                        property="fundName"
                        label="基金名称">
                        <template slot-scope="scope">
                            <el-button type="text" :disabled="!scope.row.click" @click="toDetail(scope.row)">{{ scope.row.fundName }}</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="fundScale"
                        :render-header="renderTitle"
                        label="基金实缴规模</br>(万元)">
                        <template slot-scope="scope">
                            <span  >{{ scope.row.fundScale | format1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="paid"
                        :render-header="renderTitle"
                        label="实缴金额</br>(万元)">
                        <template slot-scope="scope">
                            <span type="text" >{{ scope.row.paid | format1}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        property="stages"
                        label="出资分期">
                    </el-table-column>
                    <el-table-column
                        property="life"
                        label="缴纳年限">
                    </el-table-column>
                    <el-table-column
                        property="frequency"
                        label="分配次数">
                    </el-table-column>
                    <el-table-column
                        property="profit"
                        :render-header="renderTitle"
                        label="已分配收益 </br>(万元)">
                        <template slot-scope="scope">
                          <span type="text" >{{ scope.row.profit | format1}}</span>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div style="width: 100%;margin: 20px auto;text-align: center;">
                <el-button type="primary" round @click="close" style="width: 90px;">关闭</el-button>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    import {api} from '__views/client-management/api';
    import {STATUS_HTTP_SUCCESS, apiHttp} from '__service/csHttp';
    export default {
        data() {
            return {
                guestId: this.$route.params.eClient_bId,
                tableData: [],//后台数据
            }
        },
        watch: {

        },
        beforeRouteEnter(to, from, next) {
            next(vm => {
                vm.getInvestList();
                //vm.getAuth();
            });
        },
        mounted() {
        },
        methods: {
            //保留两位小数 && 整数部分每三位加逗号
            formatData(num) {
                    num = Number(num);
                    if (!num ) {
                        return '0.00';
                    }
                    return ((num).toFixed(2) + '').replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,');
            },
            getSummaries(param) {
                const { columns, data } = param;
                const sums = [];
                columns.forEach((column, index) => {
                    if (index === 0) {
                        sums[index] = '合计';
                        return;
                    }
                    const values = data.map(item => Number(item[column.property]));
                    if (!values.every(value => isNaN(value))) { //判断是否数字
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr);
                            if (!isNaN(value)) {
                                return prev + curr;//累加操作
                            } else {
                                return prev;
                            }
                        }, 0);
                        //判断需要格式化的属性
                        if (column.property === 'fundScale' || column.property === 'paid' || column.property === 'profit') {
                            sums[index] = this.formatData(sums[index])
                        }
                        if (column.property === 'stages' || column.property === 'life') {
                            sums[index] = '-';
                        }
                    } else {
                        sums[index] = '-';
                    }
                });
                return sums;
            },
            //导出文件
            exportFile() {
                if (this.tableData.length === 0) {
                    this.$message({
                        type: 'info',
                        message: '没有可以下载的数据',
                        center: true
                    });
                    return;
                }
                //window.open(this.baseURL + api.EXPORT_FILE.url + '?token=' + this.$store.state.user.token + '&type=' + '1' + '&name=' + '2' + '&itemNode=' + '3' + '&prostatus=' + '4' + '&fundType=' + '5');
                window.open(this.baseURL + api.EXPORT_FILE.url + '?X-Token=' + this.$store.state.user.token + '&type=10&name=""&itemNode=""&prostatus=""&fundType=""&guestId=' + this.guestId );
            },
            close() {
                this.$router.replace({ name: 'client-management'})
            },
            toDetail(row) {
                //拟投资
                //this.$router.push({ name: 'establishing-funds',params: { itemId: row.id,tabIndex: 0, openWindow: true}})
                //已投资
                this.$router.push({ name: 'investing-funds',params: { fundId: row.id,tabIndex: 0, openWindow: true}})
            },
            getInvestList() {
                let params = {
                    guestId: this.guestId
                }
                apiHttp(api.INVEST_DETAIL_LIST,params).then(ret=> {
                    if (ret.resCode === STATUS_HTTP_SUCCESS) {
                       // console.log(ret,"提交成功cccccccccccccccccc")
                        this.tableData = ret.data
                    }
                })
            }
        },
        components: {

        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
 .exportFileBtn{
         background: transparent;
         font-size: 20px;
         color: blue;
         text-decoration: underline;
 }
    .exportIcon{
        &:hover{
            i{
                color: red;
            }
        }
    }
</style>
